body, ul, html {

    list-style: none;

    margin: 0;

    padding: 0;

    width: 100%;

}

.zcy22001030403-bili-header__bar {

    background-color: #fff;  /* 初始背景透明 */

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%; /* 宽度覆盖整个页面 */

    height: 60px; /* 固定高度 */

    padding: 0 20px; /* 左右间距 */

    box-sizing: border-box;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 10;

    transition: background-color 0.3s, color 0.3s; /* 平滑过渡效果 */

}

.zcy22001030403-bili-header__bar.zcy22001030403-sticky {

    background-color: white; /* 滚动后背景变为白色 */

}

.zcy22001030403-bili-header__bar.zcy22001030403-sticky .zcy22001030403-entry-title, 

.zcy22001030403-bili-header__bar.zcy22001030403-sticky .zcy22001030403-default-entry,

.zcy22001030403-bili-header__bar.zcy22001030403-sticky .zcy22001030403-user-ui span,

.zcy22001030403-bili-header__bar.zcy22001030403-sticky .zcy22001030403-left-entry span,

.zcy22001030403-bili-header__bar.zcy22001030403-sticky .zcy22001030403-icon {

    color: black; /* 滚动后字体颜色变为黑色 */

}

.zcy22001030403-bili-header__bar.zcy22001030403-sticky .zcy22001030403-left-entry li:nth-child(5) span {

    color: #fb7299; /* 滚动时第5个菜单项的颜色 */

}

.zcy22001030403-bili-header__bar > div {

    display: flex;

    justify-content: center;

    align-items: center;

}

/* 第一个和最后一个子容器样式 */

.zcy22001030403-bili-header__bar > div:first-child,

.zcy22001030403-bili-header__bar > div:last-child {

    flex: 0 1 auto; 

}

.zcy22001030403-left-entry .zcy22001030403-default-entry,

.zcy22001030403-left-entry .zcy22001030403-entry-title,

.zcy22001030403-left-entry .zcy22001030403-download-entry, 

.zcy22001030403-left-entry .zcy22001030403-default-entry {

    height: 64px;

    line-height: 64px;

    color: #000000;  

    font-size: 14px;

    cursor: pointer;

}

.zcy22001030403-icon {

    width: 20px;

    height: 20px;

    vertical-align: -0.15em;

    fill: currentColor;

}

.zcy22001030403-bili-header__bar .zcy22001030403-left-entry,

.zcy22001030403-bili-header__bar .zcy22001030403-right-entry {

    flex: 1; /* 左右部分占用相等的空间 */

    background-color: transparent !important; 

}

.zcy22001030403-right-entry .zcy22001030403-user-ui {

    display: flex;

    flex-direction: column; /* 设置子元素垂直排列，图片在文字上方 */

    align-items: center; /* 水平居中对齐 */

    justify-content: center;

}

.zcy22001030403-right-entry .zcy22001030403-user-ui span {

    writing-mode: horizontal-tb; 

    white-space: nowrap;

}

a {

    text-decoration: none;

    margin: 0 10px 0 0;

}

.zcy22001030403-left-entry {

    display: flex;

    align-items: center;

    font-size: 16px;

    color: #000000;

    text-shadow: 0 1px 1px rgb(0 0 0 / 30%);

    height: 64px;

    padding: 0;

    margin-right: 10px;

}

.zcy22001030403-left-entry li {

    list-style: none; 

    cursor: pointer;

    white-space: nowrap;

    position: relative; 

    z-index: 10;

}

.zcy22001030403-left-entry li:nth-child(5) span {

    color: #fb7299;

}

.zcy22001030403-icon, .zcy22001030403-icondown{

    width: 20px;

    height: 20px;

    vertical-align: -0.15em;

    fill: currentColor;

    overflow: hidden; 

}

.zcy22001030403-v-popover-wrap {

  display: inline-block; /* 确保元素可以被定位 */

  transition: transform 0.3s ease; /* 设置平滑过渡效果 */

}

/* 当鼠标悬浮时 */

.zcy22001030403-v-popover-wrap:hover {

  animation: zcy22001030403-bounce 0.5s ease-in-out;

}

/* 定义跳动的动画 */

@keyframes zcy22001030403-bounce {

  0% {

    transform: translateY(0); /* 初始位置 */

  }

  50% {

    transform:  translateY(-10px); /* 向上跳动10px */

  }

  100% {

    transform: translateY(0); /* 回到原位置 */

  }

}

/* 搜索框样式 */

.zcy22001030403-center-search-container {

    box-sizing: border-box;

    color: rgb(24, 25, 28);

    display: block;

    font-size: 14px;

    font-weight: 400;

    height: 40px;

    line-height: 22.4px;

    margin: 0;

    max-width: 500px;

    min-width: 181px;

    padding: 0;

    position: relative;

    width: 363px;

}

/* 搜索框外部样式 */

.zcy22001030403-nav-searchform {

    justify-content: flex-end;

    display: flex;

    background-color: rgb(241, 242, 243);

    border: 1px solid rgb(227, 229, 231);

    border-radius: 8px;

    width: 100%;

    height: 40px;

    padding: 0 48px 0 4px;

    position: relative;

    transition: background-color 0.3s ease;

}

.zcy22001030403-nav-searchform:hover {

    background-color: rgb(255, 255, 255); /* Hover效果 */

}

/* 搜索框内部样式 */

.zcy22001030403-nav-search-content {

    display: flex;

    justify-content: space-between;

    width: 100%;

    border: 2px solid transparent;

    border-radius: 6px;

}

/* 输入框样式 */

.zcy22001030403-nav-search-content input {

    width: 100%;

    height: 32px;

    padding: 0 8px;

    border-radius: 6px;

    border: 2px solid transparent;

    line-height: 38px;

    background-color: transparent;

    transition: background-color 0.3s ease;

}

/* 搜索按钮样式 */

.zcy22001030403-nav-search-btn {

    position: absolute;

    right: 7px;

    top: 3px;

    width: 32px;

    height: 32px;

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    border-radius: 6px;

    transition: background-color 0.3s ease;

}

.zcy22001030403-nav-search-btn:hover {

    background-color: rgba(169, 169, 169, 0.5); /* Hover效果 */

}

/* 右侧入口样式 */

.zcy22001030403-right-entry {

    background-color: transparent; 

    display: flex;

    justify-content: flex-end; /* 确保从左到右排列 */

    align-items: center; /* 垂直居中对齐 */

    width: 100%; /* 盒子占满整个宽度 */

    height: 50px;

    margin: 0 0 0 10px; /* 去掉右边距，确保紧贴右侧 */

    padding: 0;

}

.zcy22001030403-user-left {

    display: flex;

    align-items: center;

    height: 50px;

    width: 50px;

    padding-right: 10px ;

    margin: 0;

    padding: 0 10px 0 0;

}

.zcy22001030403-carmer {

    border-radius: 50%;

    overflow: hidden;

    margin-right: 10px;

    cursor: pointer;

}

.zcy22001030403-user-mid {

    display: flex;

    align-items: center;

    justify-content: space-around; /* 平均分配空间 */

    width: auto; /* 允许自适应宽度 */

    margin: 0 ;

    height: 50px;

}

.zcy22001030403-user-mid .zcy22001030403-user-ui {

    display: flex; 

    flex-direction: row;

    align-items: center;

    color: #000; /* 默认颜色 */

    text-decoration: none; /* 去掉下划线 */

    transition: color 0.3s; /* 平滑过渡效果 */

}

.zcy22001030403-user-ui .zcy22001030403-icon {

    fill: #000; /* 图标默认颜色 */

    margin-right: 5px; /* 图标与文字之间的间距 */

    transition: fill 0.3s; /* 平滑过渡效果 */

}

.zcy22001030403-user-ui:hover {

    color: #fb7299; /* 鼠标悬浮时改变文字颜色 */

}

.zcy22001030403-user-ui:hover .zcy22001030403-icon {

    fill: #fb7299; /* 鼠标悬浮时改变图标颜色 */

}

.zcy22001030403-user-right {

    display: flex;

    align-items: center;

    margin-left: 10px; /* 推动到右边 */

}

.zcy22001030403-user-right a {

    color: rgb(0, 0, 0);

    display: flex;

    align-items: center;

    justify-content: center;

    white-space: nowrap; 

}


/*中间*/

.zcy22001030403-tab {

    margin-top: 20px; /* 跟 header 高度一致，确保不重叠 */

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center; /* 居中内容 */

    background-color: #f7fcfc; /* 设置白色背景 */

    padding: 20px 0;

    box-sizing: border-box;

}

.zcy22001030403-tab .zcy22001030403-t-title {

    display: flex;

    justify-content: center;

    white-space: nowrap; /* 防止换行 */

}

.zcy22001030403-tab .zcy22001030403-t-title p {

    margin-right: 40px; /* 间距 */

    padding: 16px 0;

    font-size: 20px;

    line-height: 20px;

    color: #333; /* 默认颜色 */

    position: relative;

    display: inline-block;

    cursor: pointer;

    transition: color 0.3s; /* 添加颜色过渡效果 */

}

.zcy22001030403-tab .zcy22001030403-t-title .active {
    color: #fb7299; /* active 字体颜色 */
}

.zcy22001030403-tab .zcy22001030403-t-title .active::after {
    content: '';
    width: 30px; /* 下划线宽度 */
    height: 6px; /* 下划线高度 */
    background-color: #fb7299; /* 下划线颜色 */
    border-radius: 3px; /* 圆角效果 */
    position: absolute;
    bottom: -8px; /* 下划线位置 */
    left: calc(50% - 15px); /* 居中对齐 */
}

.zcy22001030403-project-wrapper {

    background-color: #f7fcfc;

    display: flex;

    flex-wrap: wrap; /* 支持换行 */

    justify-content: center; /* 水平居中 */

    align-items: flex-start; /* 垂直对齐到顶部 */

    gap: 30px; /* 添加间距 */

    font-size: 12px;

    margin: 0;

    padding-bottom: 55px;

    width: 1160px;

    overflow: hidden;

}

.zcy22001030403-project-list {

    position: relative;

    display: flex;

    margin-top: 60px;

    width: 560px;

    height: 240px;

    background-color: #fff;

    border-radius: 8px;

    box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px;

    transition: box-shadow 0.3s ease, transform 0.3s ease;

}

.zcy22001030403-project-list:hover {

    box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 15px;

}

.zcy22001030403-project-img {

    display: block;

    position: absolute; /* 图片与文字内容重叠 */

    background-clip: border-box;

    width: 175px;

    height: 233px;

    bottom: 24px;

    left: 20px;

    border-radius: 8px;

    overflow: hidden; /* 确保图片圆角有效 */

    box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 2px;

    z-index: 1; /* 图片位于最上层 */

    margin: 0;

    padding: 0;

    transition: transform 0.3s ease; /* 图片过渡 */

}

.zcy22001030403-project-img:hover {

    transform: translateY(-10px); /* 鼠标悬浮时图片上移 */

}

.zcy22001030403-project-img img {

    width: 100%;

    height: 100%;

    display: block;

}

.zcy22001030403-project-item {

    position: relative;

    z-index: 0;

    margin-left: 223px;

    display: flex;

    width: 286px;

    height: 237px;

    flex-direction: column;

    justify-content: space-between;

    flex: 1;

}

.zcy22001030403-project-name span {

    display: flex;

    height: 48px;

    width: 286px;

    margin-top: 30px;

    font-size: 18px;

    line-height: 24px;

    color: rgb(24, 25, 28);

}

.zcy22001030403-project-time {

    align-items: center;

    color: rgb(148, 153, 160);

    font-size: 14px;

    height: 17px;

    margin: 19px 0 10px 0;

}

.zcy22001030403-project-address {

    color: rgb(148, 153, 160);

    flex: 1 1 0%;

    font-size: 14px; /* 字体大小 */

    height: 18px; /* 高度，优化为整数 */

    margin: 0; /* 所有外边距为0 */

    max-width: 260px; /* 最大宽度 */

    overflow: hidden; /* 超出隐藏 */

    text-overflow: ellipsis; /* 文字溢出显示省略号 */

    white-space: nowrap; /* 文本不换行 */

    padding: 0; /* 所有内边距为0 */

}

.zcy22001030403-project-price {

    align-items: flex-end;

    color: rgb(255, 102, 153);

    display: flex;

    font-size: 12px;

    margin: 0;

    padding: 0;

    transform: translateY(-20px);

}

.zcy22001030403-project-price .zcy22001030403-symbol {

    font-size: 18px;

    line-height: 18px;

}

.zcy22001030403-project-price .zcy22001030403-price {

    font-size: 28px;

    letter-spacing: 1px;

    line-height: 24px;

    margin-left: 4px;

}

.zcy22001030403-project-price .zcy22001030403-strat {

    line-height: 12px;

    color: rgb(148, 153, 160);

    margin: 0 0 2px 5px;

}

.zcy22001030403-whole-pagination-wrapper {

    display: flex;

    justify-content: center; /* 水平居中 */

    align-items: center; /* 垂直居中 */

    margin-top: 30px;

    padding: 10px 0;

    font-size: 14px;

    color: #666;

}

.zcy22001030403-whole-pagination-wrapper .zcy22001030403-page-control,

.zcy22001030403-whole-pagination-wrapper .zcy22001030403-page-number {

    margin: 0 8px; /* 间距 */

    padding: 6px 12px;

    cursor: pointer;

    border-radius: 4px;

    border: 1px solid transparent; /* 默认无边框 */

    transition: background-color 0.3s, color 0.3s, border-color 0.3s;

}

.zcy22001030403-whole-pagination-wrapper .zcy22001030403-page-number:hover,

.zcy22001030403-whole-pagination-wrapper .zcy22001030403-page-control:hover {

    background-color: #fb7299; /* 悬浮时背景色 */

    color: #f7fcfc;

    border-color: #fb7299; /* 显示边框 */

}

.zcy22001030403-whole-pagination-wrapper .zcy22001030403-page-number.zcy22001030403-active {

    background-color: #fb7299; /* 当前页背景色 */

    color: #f7fcfc;

    border-color: #fb7299; /* 当前页边框 */

}


/* 结尾 */

.zcy22001030403-footer {

    width: 100%;

    /* height: 500px; */

    background-color: #f6f9fa;

}

.zcy22001030403-end-wrapepr {

    width: 1226px;

    /* height: 500px; */

    /* background-color: skyblue; */

    margin: 0 auto;

    padding: 35px 0;

}

.zcy22001030403-end-header {

    display: flex;

    width: 100%;

    /* height: 300px; */

    justify-content: space-between;

}

.zcy22001030403-end-header div {

    width: 30%;

    height: 150px;

    /* background-color: pink; */

}

.zcy22001030403-end-title {

    font-size: 16px;

    color: #999;

    margin-bottom: 20px;

}

.zcy22001030403-aboutSection {

    width: 318px;

    display: flex;

    flex-wrap: wrap;

}

.zcy22001030403-aboutSection li {

    width: 50%;

    font: 14px "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", 
        "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;

    margin-bottom: 10px;

    color: #212121;

    transition: color 0.3s;

    cursor: pointer;

}

.zcy22001030403-aboutSection li:hover {

    color: #00a1d6;

}

.zcy22001030403-s-2 {

    width: 100%;

}

.zcy22001030403-s-2 li {

    width: 33.3%;

}

.zcy22001030403-downloadWrapper {

    display: flex;

    justify-content: center;

    align-items: center;

}

.zcy22001030403-download {

    display: flex;

    width: 100%;

    justify-content: space-around;

}

.zcy22001030403-download li {

    display: flex;

    flex-direction: column; /* 使图标和文字垂直排列 */

    align-items: center; /* 使图标和文字居中对齐 */

}

.zcy22001030403-dicon-wrapper {

    width: 50px !important;

    height: 50px !important;

    border-radius: 50%; /* 圆形边框 */

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 10px;

}

.zcy22001030403-download li.zcy22001030403-download-app .zcy22001030403-dicon-wrapper {

    background-color: #585f69; /* 黑色背景 */

}

.zcy22001030403-download li.zcy22001030403-sina-weibo .zcy22001030403-dicon-wrapper {

    background-color: #e30a17; /* 红色背景 */

}

.zcy22001030403-download li.zcy22001030403-weixin .zcy22001030403-dicon-wrapper {

    background-color: #1aad19; /* 绿色背景 */

}

.zcy22001030403-download li p {

    transition: color 0.3s;

    cursor: pointer;

    text-align: center;

    font: 14px "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", 
        "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;

    margin-top: 5px; /* 给文字一个小的间距，避免它和图标太贴近 */

}

.zcy22001030403-download li:hover p {

    color: #00a1d6;

}

.zcy22001030403-dicon {

    width: 20px;

    height: 20px;

    vertical-align: -0.15em;

    fill: white;

    overflow: hidden;

}
